<template>
  <el-container>
    <el-aside width="210px">
      <div class="left-view">
        <div class="left-view-title">
          <!-- <img class="view-title-logo" src="../assets/img/logo1.png" alt="">
          <span class="view-title-title">有方留学后台管理</span> -->
          <span class="view-title-title">留学后台管理</span>
        </div>
        <elMenu></elMenu>
      </div>
      <!-- 退出 -->
      <div class="left-view-logout">
        <img
          class="left-view-user"
          src="https://ym.geowin100.com/files/2024/6669094da3e611718159693.png"
          alt=""
        />
        <div class="view-logout-title" @click="logout">退出登录</div>
      </div>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import elMenu from "../components/el-menu";
import API from "@/utils/api";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted } from "vue";
const router = useRouter();
onMounted(() => {
  isHaveNewMsg();
});
// 根据缓存内容判断是否有新消息，有的话提示用户查看；
const isHaveNewMsg = () => {
  const isHave = localStorage.getItem("new_msg");
  if (isHave == 1) {
    ElMessageBox.confirm("您有待检测的文书消息！", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      customClass: "cus-dialog",
    })
      .then(() => {
        router.push({ path: "/docsCheck" });
        localStorage.setItem("new_msg", 0);
      })
      .catch(() => {
        localStorage.setItem("new_msg", 0);
      });
  }
};
const logout = () => {
  API.user.logout({}, (res) => {
    if (res.code === 0) {
      localStorage.removeItem("token");
      localStorage.removeItem("menuList");
      localStorage.removeItem("operationStatus");
      localStorage.removeItem("new_msg");
      router.push({ path: "/" });
      ElMessage.success("退出成功,请重新登录!");
    } else {
      ElMessage.error("退出失败");
    }
  });
};
</script>

<style lang="scss" scoped>
.left-view {
  background: #406493;
  height: 100vh;
  .left-view-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    .view-title-logo {
      width: 50px;
      height: 23px;
    }
    .view-title-title {
      font-size: 18px;
      color: #fff;
      font-size: 17px;
      letter-spacing: 1px;
    }
  }
}
.left-view-logout {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  margin: 10px;
  .left-view-user {
    width: 25px;
    height: 25px;
  }
  .view-logout-title {
    color: #fff;
    font-size: 12px;
    margin-left: 5px;
    cursor: pointer;
  }
}
.el-main {
  height: 100vh;
  overflow: hidden;
  padding: 0;
}
</style>
